<template>
  <div class="box">
    <div class="auto">
      <div class="small" v-for="(item, index) in infor" :key="index" @click="fun">
        <div
          class="img"
          :style="{ 'background-image': `url(${item.url})` }"
        ></div>
        <div class="write">
          <div class="content">
            <p>{{ item.write }}</p>
          </div>
          <div class="autor">
            <div
              class="like"
              :style="{ 'background-image': `url(${item.tou})` }"
            ></div>
            <div class="heart">
              <img src="../../imgytt/heart.png" alt="" />
              <p>999+</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "content_i",
};
</script>
<script setup>
import { reactive } from "vue";
import router from '@/router';
let infor = reactive([
  {
    url: require("../../imgytt/cat1.jpg"),
    tou: require("../../imgytt/head1.png"),
    write: "带宠物去看了樱花",
  },
  {
    url: require("../../imgytt/cat2.jpg"),
    tou: require("../../imgytt/head2.png"),
    write: "带宠物去看了樱花",
  },
  {
    url: require("../../imgytt/cat3.jpg"),
    tou: require("../../imgytt/head3.png"),
    write: "带宠物去看了樱花",
  },
  {
    url: require("../../imgytt/dog1.jpg"),
    tou: require("../../imgytt/head4.png"),
    write: "带宠物去看了樱花",
  },
  {
    url: require("../../imgytt/dog2.jpg"),
    tou: require("../../imgytt/head1.png"),
    write: "带宠物去看了樱花",
  },
  {
    url: require("../../imgytt/dog3.jpg"),
    tou: require("../../imgytt/head1.png"),
    write: "带宠物去看了樱花",
  },
]);

function fun(){
  router.push(
    {
      path:'/guanzhu'
    }
  )
}
</script>

<style lang="less" scoped>
.box {
  width: 25.9375rem;
  height: 100%;
  margin: 0 auto;
  .auto {
    width: 24.375rem;
    height: 56.25rem;
    margin: 0 auto;
  }
}
.small {
  display: inline-block;
  margin: .625rem;
  cursor: pointer;
}
.img {
  width: 10.625rem;
  height: 12.1875rem;
  border-radius: .875rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.write {
  width: 10.625rem;
  height: 1.25rem;
  padding-left: .3125rem;
  .content {
    p {
      font-size: .625rem;
      color: #000000;
      font-family: "Ping Fang  SC  Regular";
    }
    height: 1.25rem;
    padding-left: .3125rem;
    padding-top: .3125rem;
    white-space: nowrap;
  }
  .autor {
    margin-top: .3125rem;
    padding-right: .9375rem;
    height: 1.25rem;
    .like {
      float: left;
      width: 1.4375rem;
      height: 1.4375rem;
      border-radius: .75rem;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }
    .heart {
      float: right;
      img,
      p {
        display: inline-block;
      }
      p {
        font-size: .625rem;
        color: #000000;
        font-family: "Ping Fang  SC  Regular";
      }
    }
  }
}
</style>